<script lang="ts">
export default {
  name: "RepoProductEntityDialog"
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog :close-on-click-modal="false" :model-value="visible" :title="dataState.title" min-width="100px"
             @close="handleCancel">

    <!-- 数据表单 -->
    <el-form ref="dataFormRef" :model="dataState.formData" :rules="dataState.rules" label-width="80px">

      <el-form-item label="生产厂商" prop="manufacturer">
        <el-input v-model="dataState.formData.manufacturer"/>
      </el-form-item>

      <el-form-item label="产品型号" prop="deviceType">
        <el-input v-model="dataState.formData.deviceType"/>
      </el-form-item>

      <el-form-item label="产品图片" prop="image">
        <el-input v-model="dataState.formData.image" placeholder="产品图片">
          <template #append>
            <el-upload
                v-model:file-list="dataState.fileList"
                :before-upload="handleBeforeUpload"
                :http-request="(file)=>{return handleUpload(file)}"
                :show-file-list="false"
                accept="image/*"
            >
              <el-button slot="trigger" :icon="Upload" circle plain type="primary"/>
            </el-upload>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="外部链接" prop="url">
        <el-input v-model="dataState.formData.url"/>
      </el-form-item>

      <el-form-item label="产品标签" prop="tags">
        <el-input v-model="dataState.formData.tags" :autosize="{ minRows: 5, maxRows: 100 }" type="textarea"/>
      </el-form-item>

      <el-form-item label="产品描述" prop="description">
        <el-input v-model="dataState.formData.description" :autosize="{ minRows: 5, maxRows: 100 }" type="textarea"/>
      </el-form-item>

    </el-form>

    <!-- 脚部：确认/取消按钮-->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import {Upload} from '@element-plus/icons-vue';

import {ElForm, ElMessage, UploadRawFile, UploadRequestOptions, UploadUserFile} from "element-plus";
import {RepoProductEntity, CreateRepoProductRequestVO} from "@/api/cloud/repository/repoproduct/types";
import {uploadImage} from "@/api/cloud/repository/fileupload";

const props = defineProps(['visible']);
const emit = defineEmits(['create', 'update', 'cancel']); //注意：这个是父组件<dict-type-edit>标签上的@close
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initEditData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '添加产品',
  // 表单数据
  formData: {
    uuid: '',
    manufacturer: '',
    deviceType: '',
    image: '',
    url: '',
    tags: '',
    description: '',
  } as CreateRepoProductRequestVO,
  // 文件列表
  fileList: [] as UploadUserFile[],
  // 产品门类
  categoryOptions: [] as OptionType[],
  // 对话框的各控件输入规则
  rules: {
    deviceType: [{required: true, message: '必填項', trigger: 'blur'}],
    manufacturer: [{required: true, message: '必填項', trigger: 'blur'}],
    image: [{required: true, message: '必填項', trigger: 'blur'}],
    url: [{required: true, message: '必填項', trigger: 'blur'}],
  },
});

/**
 * 取消
 */
function handleCancel() {
  //执行调用<config-edit-dialog @cancel="cancelEdit">
  emit('cancel', "子组件传给父组件的值");
}

/**
 * 限制用户上传文件的格式和大小
 */
function handleBeforeUpload(file: UploadRawFile) {
  if (file.size > 2 * 1048 * 1048) {
    ElMessage.warning('上传文件不能大于2M');
    return false;
  }

  return true;
}


/**
 * 自定义图片上传
 *
 */
async function handleUpload(options: UploadRequestOptions): Promise<any> {
  // 上传API调用
  uploadImage(options.file).then(({data}) => {
    dataState.formData.image = data.url;
    dataState.fileList = [];
  });
}

/**
 * 确认：新增/修改实体
 */
function handleSubmit() {
  if (dataState.type === 'create') {
    // 执行调用<config-edit-dialog @create="createEdit">的create
    emit('create', dataState.formData);
  }
  if (dataState.type === 'update') {
    //执行调用<config-edit-dialog @update="updateEdit">
    emit('update', dataState.formData);
  }
}

/**
 * 初始化对话框
 * @taskParam type 对话框类型
 * @taskParam entity 实体
 */
function initEditData(type: string, entity: RepoProductEntity) {
  if (type === 'create') {
    dataState.type = type;
    dataState.title = '新增产品';

    dataState.formData.uuid = undefined;
    dataState.formData.manufacturer = '';
    dataState.formData.deviceType = '';
    dataState.formData.image = '';
    dataState.formData.url = '';
    dataState.formData.tags = '';
    dataState.formData.description = '';

    nextTick(() => {
      dataFormRef.value.resetFields();
    })
    return;
  }

  if (type === 'update') {
    dataState.type = type;
    dataState.title = '修改产品';

    dataState.formData.uuid = entity.uuid;
    dataState.formData.manufacturer = entity.manufacturer;
    dataState.formData.deviceType = entity.deviceType;
    dataState.formData.image = entity.image;
    dataState.formData.url = entity.url;
    dataState.formData.tags = entity.tags;
    dataState.formData.description = entity.description;

    return;
  }
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>
